---
layout: single
property_name: display
---

<section id="display" class="property">
  <header class="property-header">
    <nav class="property-links">
      <a class="property-links-direct" href="{{site.url}}/property/display/" data-property-name="display" data-tooltip="Single page for this property">Permalink</a>
      <a class="property-share" data-tooltip="Share on Twitter or Facebook" data-property-name="display">Share</a>
      <a target="_blank" href="https://developer.mozilla.org/en/docs/Web/CSS/display" data-tooltip="See on Mozilla Developer Network" rel="external">MDN</a>
    </nav>
    <h2 class="property-name">
      <a href="#display"><span>#</span>display</a>
    </h2>
    <div class="property-description">
      <p>Sets the display behavior of the element.</p>

    </div>

  </header>



    <style type="text/css">.display .block--alpha { padding: 0; }.display .block span { background: hsl(348, 100%, 61%);color: #fff; }.display .block span:last-child { background: hsl(217, 71%, 53%); }</style>


    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: none;">display: none;</code>
        </p>
        <div class="example-description">
          <p>The element is completely <strong>removed</strong>, as if it wasn&#39;t in the HTML code in the first place.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-none"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-none .block--alpha { display: none; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline;">display: inline;</code>
        </p>
        <div class="example-description">
          <p>The element is turned into an <strong>inline</strong> element: it behaves like simple text.</p>
<p>Any <code>height</code> and <code>width</code> applied will have <strong>no</strong> effect.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-inline"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-inline .block--alpha { display: inline; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: block;">display: block;</code>
        </p>
        <div class="example-description">
          <p>The element is turned into a <strong>block</strong> element: it starts on a new line, and takes up the whole width.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-block"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-block .block--alpha { display: block; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline-block;">display: inline-block;</code>
        </p>
        <div class="example-description">
          <p>The element shares properties of both an <strong>inline</strong> and a <strong>block</strong> element:</p>
<ul><li><strong>inline</strong> because the element behaves like simple text, and inserts itself in a block of text</li><li><strong>Block</strong> because you can apply <code>height</code> and <code>width</code> values</ul><p>For example, this element has:</p>
<pre>.element{
  height: 3em;
  width: 60px;
}</pre>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-inline-block"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-inline-block .block--alpha { display: inline-block;height: 3em;width: 60px; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: list-item;">display: list-item;</code>
        </p>
        <div class="example-description">
          <p>The element behaves like a <strong>list item</strong>: <code>&lt;li&gt;</code>. The only difference with <strong>block</strong> is that a list item has a <strong>bullet point</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-list-item"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Hello world</p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-list-item .block--alpha { display: list-item; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table;">display: table;</code>
        </p>
        <div class="example-description">
          <p>The element behaves like a <strong>table</strong>: <code>&lt;table&gt;</code>.</p>
<p>Its content and child elements behave like table cells.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-table"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-table .block--alpha { display: table; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table-cell;">display: table-cell;</code>
        </p>
        <div class="example-description">
          <p>The element behaves like a <strong>table cell</strong>: <code>&lt;td&gt;</code> or <code>&lt;th&gt;</code>.</p>
<p>Its content and child elements behave like table cells.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-table-cell"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-table-cell .block--alpha { display: table-cell; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: table-row;">display: table-row;</code>
        </p>
        <div class="example-description">
          <p>The element behaves like a <strong>table row</strong>: <code>&lt;tr&gt;</code>.</p>
<p>Its content and child elements behave like table cells.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-table-row"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha">Target <span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-table-row .block--alpha { display: table-row; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: flex;">display: flex;</code>
        </p>
        <div class="example-description">
          <p>The element is turned into an <strong>flexbox</strong> container. On its own, it behaves like a block element.</p>
<p>Its child elements will be turned into <strong>flexbox items</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-flex"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha"><span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-flex .block--alpha { display: flex; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline-flex;">display: inline-flex;</code>
        </p>
        <div class="example-description">
          <p>The element shares properties of both an <strong>inline</strong> and a <strong>flexbox</strong> element:</p>
<ul><li><strong>inline</strong> because the element behaves like simple text, and inserts itself in a block of text</li><li><strong>flexbox</strong> because its child element will be turned into flexbox items</ul><p>For example, this element has:</p>
<pre>.element{
  height: 3em;
  width: 120px;
}</pre>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-inline-flex"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha"><span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-inline-flex .block--alpha { display: inline-flex;height: 3em;width: 120px; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: grid;">display: grid;</code>
        </p>
        <div class="example-description">
          <p>The element is turned into an <strong>grid</strong> container. On its own, it behaves like a block element.</p>
<p>Its child elements will be turned into <strong>grid items</strong>.</p>

        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-grid"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha"><span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-grid .block--alpha { display: grid;grid-template-columns: auto auto; }</style>
    </section>
    <section class="example">
      <header class="example-header">
        <p class="example-name">


          <code class="example-value" data-tooltip="Click to copy" data-clipboard-text="display: inline-grid;">display: inline-grid;</code>
        </p>
        <div class="example-description">
          <p>The element shares properties of both an <strong>inline</strong> and a <strong>grid</strong> element:</p>
<ul><li><strong>inline</strong> because the element behaves like simple text, and inserts itself in a block of text</li><li><strong>grid</strong> because its child element will be turned into flexbox items</ul><p>For example, this element has:</p>
<pre>.element{
  height: 3em;
  width: 120px;
}</pre>
        </div>
      </header>

      <aside class="example-preview">
        <div class="example-browser"><i></i><i></i><i></i></div>
        <div class="example-output">
          <div class="example-output-div display " id="display-inline-grid"><div class="block">Lorem ipsum dolor sit amet, consectetur adipiscing elit. <p class="block block--alpha"><span>First child</span> <span>Second child</span></p> Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut.</div></div>
        </div>
      </aside>
        <style type="text/css">#display-inline-grid .block--alpha { display: inline-grid;grid-template-columns: auto auto;height: 3em;width: 120px; }</style>
    </section>

</section>
